<template>
	<view>
		<view class="header status_bar">
			<!-- <view class="back iconfont icon-gengduo-copy" @tap="backPage"></view> -->
			<view class="text">种树</view>
		</view>
		<!-- <view class="clear_box"></view> -->
		<view class="bg_box">
			<image class="bg01" src="../../static/img01/bg07.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="bar_box">
					<image class="bar_bg" src="../../static/img01/bg08.png" mode="widthFix"></image>
					<view class="bar_content">
						<view class="name">茶树</view>
						<view class="progress_box">
							<view class="progress" :style="{width:progress + '%'}"></view>
							<view class="text">成长值：500/10000</view>
						</view>					
					</view>
				</view>
				<view class="rule">团队再成交1单，就能成长成树啦！
					每月可获得一份茶叶产品，加油！！！</view>
			</view>
			<view class="menu01">规则</view>
			<view class="menu02">明细</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				select: 0,
				info: '',
				progress: '80',
			};
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
			//that.loadData()
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._get('user/addresses', {
					per_page: '10',
					page: that.page
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			}



		},

	};
</script>

<style>
	page {
		background-color: #2CC974;
	}

	.header {
		background-color: transparent !important;
	}


	.header .text {
		background-color: transparent !important;
		color: #fff;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}
	
	.bg_box .menu01{
		height: 8vw;
		padding: 0 3vw 0 4vw;
		line-height: 8vw;
		background-color: #0DA4AD;
		border-radius: 8vw 0 0 8vw;
		position: absolute;
		right: 0;
		top: 20vw;
		font-size: 3.5vw;
		color: #fff;
	}
	
	.bg_box .menu02{
		height: 8vw;
		padding: 0 3vw 0 4vw;
		line-height: 8vw;
		background-color: #0DA4AD;
		border-radius: 8vw 0 0 8vw;
		position: absolute;
		right: 0;
		top: 30vw;
		font-size: 3.5vw;
		color: #fff;
	}

	.bg_box .bg_content {
		width: 86%;
		position: absolute;
		left: calc(50% - 43%);
		top: calc(57vh + var(--status-bar-height));
		z-index: 99;
		padding-bottom: 15vw;
		border-radius: 4vw;
		padding: 4vw;
	}
	
	.bg_content .rule{
		width: 70%;
		font-size: 3.2vw;
		color: #fff;
		font-weight: bold;
		line-height: 5vw;
		margin: 8% auto 0;
		text-align: center;
	}

	.bar_box {
		width: 100%;
		position: relative;
	}

	.bar_box .bar_bg {
		width: 100%;
		display: block;
	}

	.bar_box .bar_content {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 3.8vw;
	}

	.bar_box .bar_content .name {
		font-size: 3.5vw;
		color: #855F4A;
		margin-right: 3.8vw;
		font-weight: bold;

	}
	
	

	.bar_box .bar_content .progress_box {
		flex: 1;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}

	.bar_box .bar_content .progress_box .progress {
		/* width: 50%; */
		height: 64%;
		background: linear-gradient(#FA8D4E, #E95832);
		border-radius: 10vw;
	}

	.bar_box .bar_content .progress_box .text {
		font-size: 3.2vw;
		color: #855E4F;
		position: absolute;
		right: 5vw;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;
	}
</style>